<template>
    <div class="app-container">
        <h2 style="margin: auto;text-align: center;">精确盘点</h2>
        <el-form ref="form" :model="form" :rules="rules" size="medium" label-width="100px">
            <h3>基本信息</h3>
            <el-row>
                <el-col :span="5">
                    <el-form-item label="供应商名称">
                        <el-input v-model="form.suname" clearable :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">

                    <el-form-item label="关联采购合同">
                        <el-input v-model="form.sucontract" clearable :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="5">
                    <el-form-item label="采购人员">
                        <el-input v-model="form.supersonnel" clearable :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">

                    <el-form-item label="退货人员">
                        <el-input v-model="form.returnpersonnel" clearable :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="5">
                    <el-form-item label="单据主题">
                        <el-input v-model="form.dosubject" clearable :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="单据编号">
                        <el-input v-model="form.iNum" recode :style="{ width: '100%' }" :disabled="true"
                            placeholder="保存后自动生成">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="对方代表">
                        <el-input v-model="form.representative" clearable :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="我方代表">
                        <el-input v-model="form.myRepresentative" clearable :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>

                <el-col :span="5">
                    <el-form-item label="退货类别">
                        <el-select v-model="form.retype" placeholder="来源单据类型" :style="{ width: '100%' }">
                            <el-option label="产品质量" value="无来源"></el-option>
                            <el-option label="服务质量" value="报价申请"></el-option>
                            <el-option label="超出需求" value="采购申请"></el-option>
                            <el-option label="改变需求" value="项目档案"></el-option>
                            <el-option label="其他原因" value="项目档案"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="退货日期">
                        <el-date-picker v-model="form.redatetimes" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="关联项目">
                        <el-input v-model="form.reitem" clearable :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">

                </el-col>
            </el-row>
            <h3>其他信息</h3>
            <el-row>

                <el-col :span="8">
                    <el-form-item label="退货方式">
                        <el-input v-model="form.refundway" clearable :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="退款方式">
                        <el-input v-model="form.reway" clearable :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="退货地址">
                        <el-input v-model="form.readdress" clearable :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>

                <el-col :span="18">
                    <el-form-item label="备注">
                        <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="form.redesc">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
        <!-- <div slot="footer">
            <el-button size="small" type="text" @click="cancel">取消</el-button>
            <el-button size="small" v-loading="formLoading" type="primary" @click="save">确认</el-button>
        </div> -->
        <div>
            <h2>盘点明细</h2>
            <el-button size="small" @click="addRow">新增</el-button>
        </div>
        <!--设置的表单-->
        <el-form :model="studentData" ref="data" label-width="auto">
            <el-table border :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
                :data="studentData" ref="table" style="width: 100%">

                <el-table-column align="center" label="产品名称">
                    <template slot-scope="scope">
                        <!--表格里面嵌套表单-->
                        <el-form-item :prop="scope.$index + '.saname'"
                            :rules="{ required: true, message: '产品名称不能为空', trigger: 'blur' }">
                            <el-input v-model="studentData[scope.$index].saname" autocomplete="off" size="small"
                                placeholder="产品名称"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="产品编号">
                    <template slot-scope="scope">
                        <el-form-item :prop="scope.$index + '.sacode'"
                            :rules="{ required: true, message: '产品编号不能为空', trigger: 'blur' }">

                            <el-input v-model="studentData[scope.$index].sacode" autocomplete="off" size="small"
                                placeholder="产品数量"></el-input>

                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="规格型号">
                    <template slot-scope="scope">
                        <el-form-item :prop="scope.$index + '.saspecification'"
                            :rules="{ required: true, message: '规格型号不能为空', trigger: 'blur' }">
                            <el-input v-model="studentData[scope.$index].saspecification" autocomplete="off"
                                size="small" placeholder="规格型号"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="单位">
                    <template slot-scope="scope">
                        <el-form-item :prop="scope.$index + '.saunit'"
                            :rules="{ required: true, message: '单位不能为空', trigger: 'blur' }">
                            <el-input v-model="studentData[scope.$index].saunit" autocomplete="off" size="small"
                                placeholder="单位"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="数量">
                    <template slot-scope="scope">
                        <el-form-item :prop="scope.$index + '.sanum'"
                            :rules="{ required: true, message: '数量', trigger: 'blur' }">

                            <el-input v-model="studentData[scope.$index].sanum" autocomplete="off" size="small"
                                type='number' placeholder="数量"></el-input>

                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="单价">
                    <template slot-scope="scope">
                        <el-form-item :prop="scope.$index + '.saprice'"
                            :rules="{ required: true, message: '单价', trigger: 'blur' }">

                            <el-input v-model="studentData[scope.$index].saprice" autocomplete="off" size="small"
                                type='number' placeholder="单价"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="票据类型">
                    <template slot-scope="scope">
                        <el-form-item :prop="scope.$index + '.sabilltype'"
                            :rules="{ required: true, message: '票据类型', trigger: 'blur' }">

                            <el-input v-model="studentData[scope.$index].sabilltype" autocomplete="off" size="small"
                                placeholder="票据类型"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>


                <el-table-column align="center" label="税率">
                    <template slot-scope="scope">
                        <el-form-item :prop="scope.$index + '.sarate'"
                            :rules="{ required: true, message: '税率', trigger: 'blur' }">

                            <el-input v-model="studentData[scope.$index].sarate" autocomplete="off" size="small"
                                type='number' placeholder="税率"></el-input>

                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="含税单价">
                    <template slot-scope="scope">
                        <el-form-item :prop="scope.$index + '.sainclusivePrice'"
                            :rules="{ required: true, message: '含税单价', trigger: 'blur' }">

                            <el-input v-model="studentData[scope.$index].sainclusivePrice" autocomplete="off"
                                size="small" placeholder="含税单价"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="未税金额">
                    <template slot-scope="scope">
                        <el-form-item :prop="scope.$index + '.sauntaxedmoney'"
                            :rules="{ required: true, message: '未税金额', trigger: 'blur' }">

                            <el-input v-model="studentData[scope.$index].sauntaxedmoney" autocomplete="off" size="small"
                                type='number' placeholder="未税金额"></el-input>

                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="税额">
                    <template slot-scope="scope">
                        <el-form-item :prop="scope.$index + '.saamount'"
                            :rules="{ required: true, message: '税额', trigger: 'blur' }">

                            <el-input v-model="studentData[scope.$index].saamount" autocomplete="off" size="small"
                                type='number' placeholder="税额"></el-input>

                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="总金额">
                    <template slot-scope="scope">
                        <el-form-item :prop="scope.$index + '.sasummoney'"
                            :rules="{ required: true, message: '总金额', trigger: 'blur' }">

                            <el-input v-model="studentData[scope.$index].sasummoney" autocomplete="off" size="small"
                                type='number' placeholder="总金额"></el-input>

                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="是否需要出库">
                    <template slot-scope="scope">
                        <el-form-item :prop="scope.$index + '.saselect'"
                            :rules="{ required: true, message: '是否需要出库', trigger: 'blur' }">

                            <el-input v-model="studentData[scope.$index].saselect" autocomplete="off" size="small"
                                placeholder="是否需要出库"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="批号">
                    <template slot-scope="scope">
                        <el-form-item :prop="scope.$index + '.lotnumber'"
                            :rules="{ required: true, message: '批号', trigger: 'blur' }">

                            <el-input v-model="studentData[scope.$index].lotnumber" autocomplete="off" size="small"
                                placeholder="批号"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="有效日期">
                    <template slot-scope="scope">
                        <el-form-item :prop="scope.$index + '.effectivedate'"
                            :rules="{ required: true, message: '有效日期', trigger: 'blur' }">
                            <el-input v-model="studentData[scope.$index].effectivedate" autocomplete="off" size="small"
                                type='date' placeholder="有效日期"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="生产日期">
                    <template slot-scope="scope">
                        <el-form-item :prop="scope.$index + '.givedate'"
                            :rules="{ required: true, message: '生产日期', trigger: 'blur' }">
                            <el-input v-model="studentData[scope.$index].givedate" autocomplete="off" size="small"
                                type='date' placeholder="生产日期"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="倒货日期">
                    <template slot-scope="scope">
                        <el-form-item :prop="scope.$index + '.arrivedate'"
                            :rules="{ required: true, message: '倒货日期', trigger: 'blur' }">
                            <el-input v-model="studentData[scope.$index].arrivedate" autocomplete="off" size="small"
                                type='date' placeholder="倒货日期"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="备注">
                    <template slot-scope="scope">
                        <el-form-item :prop="scope.$index + '.sadesc'"
                            :rules="{ required: true, message: '备注', trigger: 'blur' }">

                            <el-input v-model="studentData[scope.$index].sadesc" autocomplete="off" size="small"
                                placeholder="备注"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>



                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleDeleteRow(studentData[scope.$index])" type="text"
                            size="small">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </el-form><br />
        <div slot="footer">
            <el-button size="small" type="text" @click="cancel">取消</el-button>
            <el-button size="small" v-loading="formLoading" type="primary" @click="save">确认</el-button>
        </div>
    </div>
</template>
<script>
import Pagination from "@/components/Pagination";
import permission from "@/directive/permission/index.js";
import { cloneDeep } from "lodash";


export default {
    name: 'Book',
    components: {
        Pagination
    },
    directives: {
        permission
    },
    props: [],
    data() {
        return {
            studentData: [],
            form: {
                "suname": "",
                "sucontract": "",
                "supersonnel": "",
                "returnpersonnel": "",
                "dosubject": "",
                "recode": "",
                "representative": "",
                "myRepresentative": "",
                "retype": "",
                "redatetimes": Date.now(),
                "reitem": "",
                "refundway": "",
                "reway": "",
                "readdress": "",
                "redesc": "",
                produceSapro: []

            },


            rules: {
                name: [{
                    required: true,
                    message: '请输入名称',
                    trigger: 'blur'
                }],
                description: [{
                    required: true,
                    message: '请输入描述',
                    trigger: 'blur'
                }],
                price: [{
                    required: true,
                    message: '价格',
                    trigger: 'blur'
                }],
            },

            list: [],
            totalCount: 0,
            listLoading: true,
            formLoading: false,
            listQuery: {
                Filter: '',
                Sorting: '',
                SkipCount: 0,
                MaxResultCount: 10
            },
            page: 1,
            dialogFormVisible: false,
            multipleSelection: [],
            formTitle: '',
            isEdit: false,
        }
    },
    computed: {},
    watch: {},
    created() {
        this.getList()
    },
    mounted() { },
    methods: {
        /**
    * 新增行
    */
        addRow() {
            let index = this.studentData.length;
            this.studentData.push({

                "spid": "",
                "saname": "",
                "sacode": "",
                "saspecification": "",
                "saunit": "",
                "sanum": "",
                "saprice": "",
                "sabilltype": "",
                "sarate": "",
                "sainclusivePrice": "",
                "sauntaxedmoney": "",
                "saamount": "",
                "sasummoney": "",
                "saselect": "",
                "lotnumber": "",
                "effectivedate": Date.now(),
                "givedate": Date.now(),
                "arrivedate": Date.now(),
                "sadesc": ""
            });
        },

        /**
         * 删除行
         * @param row
         */
        handleDeleteRow(row) {
            let datas = this.studentData;
            for (var i = 0; i < datas.length; i++) {
                if (datas[i].key == row.key) {
                    datas.splice(i, 1);
                }
            }
        },

        /**
         * 提交
         */
        submit() {
            this.$refs["data"].validate(valid => {
                //valid为true，表示表单都已经验证通过，若为false，说明存在表单验证失败
                if (valid) {
                    save(this.studentData).then(response => {
                        this.$message({
                            message: '提交成功',
                            type: 'success'
                        });
                    });
                }
            });
        },

        /**
         * 重置
         */
        resetForm() {
            let datas = this.studentData;
            for (var i = 0; i < datas.length; i++) {
                datas[i].name = '';
                datas[i].age = '';
                datas[i].sex = '';
            }
        },

        getListStatus(items, ids) {
            this.$axios.posts('api/business/workflow/node-status', ids).then(response => {
                items.forEach(element => { response.items.filter((i) => { if (i.entityId === element.id) { element.status = i.status; element.nodeId = i.nodeId; element.nodeStatus = i.nodeName } }) })
                this.list = items
                this.listLoading = false;
            });
        },
        getList() {
            this.listLoading = true;
            this.listQuery.SkipCount = (this.page - 1) * this.listQuery.MaxResultCount;
            this.$axios.gets('/api/business/invenk', this.listQuery).then(response => {
                this.totalCount = response.totalCount;
                this.getListStatus(response.items, response.items.map(_ => _.id))
            });
        },
        fetchData(id) {
            this.$axios.gets('/api/business/invenk/' + id).then(response => {
                this.form = response;
            });
        },
        handleFilter() {
            this.page = 1;
            this.getList();
        },
        handleCreate() {
            this.formTitle = '新增图书';
            this.isEdit = false;
            this.dialogFormVisible = true;
        },
        handleDelete(row) {
            var params = [];
            let alert = '';
            if (row) {
                params.push(row.id);
                alert = row.name;
            }
            else {
                if (this.multipleSelection.length === 0) {
                    this.$message({
                        message: '未选择',
                        type: 'warning'
                    });
                    return;
                }
                this.multipleSelection.forEach(element => {
                    let id = element.id;
                    params.push(id);
                });
                alert = '选中项';
            }
            this.$confirm('是否删除' + alert + '?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.posts('/api/business/invenk/delete', params).then(response => {
                    this.$notify({
                        title: '成功',
                        message: '删除成功',
                        type: 'success',
                        duration: 2000
                    });
                    this.getList();
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleCheck() {
            if (this.multipleSelection.length === 0) {
                this.$message({
                    message: '未选择',
                    type: 'warning'
                });
                return;
            }
            if (this.multipleSelection.length > 1) {
                this.$message({
                    message: '暂不支持批量审核',
                    type: 'warning'
                });
                return;
            }
            this.$confirm('是否审核所选项?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.puts('api/business/workflow/do/' + this.multipleSelection[0].id, { data: JSON.stringify(this.multipleSelection[0]) }).then(response => {
                    this.$notify({
                        title: '成功',
                        message: '审核成功',
                        type: 'success',
                        duration: 2000
                    });
                    this.getList();
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消审核'
                });
            });
        },
        findFlow(row) {
            this.$router.push({ path: "/tool/flowDisplay/" + row.nodeId });
        },
        handleUpdate(row) {
            this.formTitle = '修改图书';
            this.isEdit = true;
            if (row) {
                this.fetchData(row.id);
                this.dialogFormVisible = true;
            }
            else {
                if (this.multipleSelection.length != 1) {
                    this.$message({
                        message: '编辑必须选择单行',
                        type: 'warning'
                    });
                    return;
                }
                else {
                    this.fetchData(this.multipleSelection[0].id);
                    this.dialogFormVisible = true;
                }
            }
        },
        save() {
            //数组与对象转换
            let goodList = [];
            this.studentData.forEach(element => {
                goodList.push({
                    "spid": element.spid,
                    "saname": element.saname,
                    "sacode": element.sacode,
                    "saspecification": element.saspecification,
                    "saunit": element.saunit,
                    "sanum": element.sanum,
                    "saprice": element.saprice,
                    "sabilltype": element.sabilltype,
                    "sarate": element.sarate,
                    "sainclusivePrice": element.sainclusivePrice,
                    "sauntaxedmoney": element.sauntaxedmoney,
                    "saamount": element.saamount,
                    "sasummoney": element.sasummoney,
                    "saselect": element.saselect,
                    "lotnumber": element.lotnumber,
                    "effectivedate": element.effectivedate,
                    "givedate": element.givedate,
                    "arrivedate": element.arrivedate,
                    "sadesc": element.sadesc
                });
            });
            this.form.produceSapro = goodList;

            console.log(this.form)





            this.$refs.form.validate(valid => {
                if (valid) {
                    this.formLoading = true;
                    this.form.roleNames = this.checkedRole;
                    if (this.isEdit) {
                        this.$axios.posts('/api/business/sale/data-post', this.form).then(response => {
                            this.formLoading = false;
                            this.$notify({
                                title: '成功',
                                message: '更新成功',
                                type: 'success',
                                duration: 2000
                            });
                            this.dialogFormVisible = false;
                            this.getList();
                        }).catch(() => {
                            this.formLoading = false;
                        });
                    }
                    else {
                        this.$axios.posts('/api/business/sale/data-post', this.form).then(response => {
                            this.formLoading = false;
                            this.$notify({
                                title: '成功',
                                message: '新增成功',
                                type: 'success',
                                duration: 2000
                            });
                            this.dialogFormVisible = false;
                            this.getList();
                        }).catch(() => {
                            this.formLoading = false;
                        });
                    }
                }
            });
        },
        sortChange(data) {
            const {
                prop,
                order
            } = data;
            if (!prop || !order) {
                this.handleFilter();
                return;
            }
            this.listQuery.Sorting = prop + ' ' + order;
            this.handleFilter();
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleRowClick(row, column, event) {
            this.$refs.multipleTable.clearSelection();
            this.$refs.multipleTable.toggleRowSelection(row);
        },
        cancel() {
            this.form = Object.assign({}, defaultForm);
            this.dialogFormVisible = false;
            this.$refs.form.clearValidate();
        },
    }
}

</script>
<style></style>
